<template>
  <div>
    <CategorySelector :isDisable="showStatus!==ShowStatus.SPU_LIST"></CategorySelector>
    <SpuList @setShowStatus="changeStatus"
    @getSpuInfo="saveSpuInfo"
    v-if="showStatus===ShowStatus.SPU_LIST"></SpuList>
    <SpuForm
    @setShowStatus="changeStatus" 
    :currentSpuInfo="currentSpuInfo"  
    v-if="showStatus===ShowStatus.SPU_FORM"></SpuForm>
    <SkuForm 
    :currentSpuInfo="currentSpuInfo" 
    v-if="showStatus===ShowStatus.SKU_FORM"></SkuForm>
  </div>
</template>

<script lang="ts">
export default {
  name:'Spu'
}
</script>
<script lang="ts" setup>
import {ref} from 'vue'
import CategorySelector from '@/components/CategorySelector/index.vue'
import SpuList from './components/SpuList.vue'
import SpuForm from './components/SpuForm.vue'
import SkuForm from './components/SkuForm.vue'
import {ShowStatus} from './types'

const showStatus = ref(ShowStatus.SPU_LIST)
//定义一个变量存储数据
const currentSpuInfo = ref({})
// 1. 实现组件间的切换
const changeStatus = status => {
  showStatus.value = status;
};

// 2. 接收待编辑的数据
const saveSpuInfo = (spuInfo) => {
  currentSpuInfo.value = {
    ...spuInfo,
    //避免跳转页面出错，添加两个变量
    spuImageList:[],
    spuSaleAttrList:[], 

  }
}
</script>

<style>

</style>
